<template>
  <div>
    <div style="position: relative">
      <div class="outer34 flex-col">
        <img
          style="width: 60%;margin: 0 auto"
          referrerpolicy="no-referrer"
          src="../../../assets/images/index/title02.png"
        />
      </div>
      <Row style="z-index: 300;position:absolute;width: 100%;top: 160px;" justify="space-between" type="flex">
        <i-col span="8" style="background-color:#fff;height: 155px;width: 370px;">
          <div>
            <img
              class="img4"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga3955415f58eebb84fb5d487aa4c324df8d1ab128a2e58ae1332a0cafe905816"
            />
            <span class="word67">青岛军民融合食品保障有限公司</span>
            <span class="word68">主营：副食品配送</span>
          </div>
        </i-col>
        <i-col span="8" style="background-color:#fff;height: 155px;width: 370px;">

          <div class="outer39 flex-col">
            <div class="section24 flex-col">
              <img
                style="display: block; margin: 0 auto"
                class="img5"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng5655e1901e4633295c5170140f55b923306fb4fc04d7e0688dd41469fdd515e6"
              />
              <span class="info41">青岛正大有限公司</span>
              <span class="word69">主营：副食品配送</span>
            </div>
          </div>
        </i-col>
        <i-col span="8" style="background-color:#fff;height: 155px;width: 370px;">
          <div class="outer39 flex-col">
            <div class="section24 flex-col">
              <img
                class="img5"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9990076291c8435c9b114db980fadbe3c79d8944a1105241c0c5e3e374fcfa47"
              />
              <span class="word70">青岛军民融合食品保障有限公司</span>
              <span class="word71">主营：副食品配送</span>
            </div>
          </div>
        </i-col>
      </Row>

      <div class="group22 flex-col">
        <div class="bd11 flex-col justify-between">
          <div class="outer19 flex-row">
            <Row style="z-index: 300;width: 100%;" justify="space-between" type="flex">
              <i-col
                span="8"
                v-for="(item, index) in loopData0"
                :key="index"
                style="background-color:#fff;height: 155px;width: 370px;">
                <div class="outer39 flex-col">
                  <div class="section24 flex-col">
                    <img
                      class="pic1"
                      referrerpolicy="no-referrer"
                      :src="item.lanhuimage0"
                    />
                    <span class="word18" v-html="item.lanhutext0"></span>
                    <span class="word19" v-html="item.lanhutext1"></span>
                  </div>
                </div>
              </i-col>
            </Row>
          </div>
          <div class="outer21 flex-col">
            <img
              style="width: 60%;margin: 0 auto"
              referrerpolicy="no-referrer"
              src="../../../assets/images/index/title03.png"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index-supply",
  data() {
    return {
      loopData0: [
        {
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngedfedf916d4181e4a3d3c1a7dd7c65d665304ba121433862ebade90514cd74e0',
          lanhutext0: '青岛军民融合食品保障有限公司',
          lanhutext1: '主营：副食品配送',
        },
        {
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1acfcb0ef5e4cc689b6ea1b3849711d3f0bb925adaaddec1716291b4658c91b7',
          lanhutext0: '青岛军民融合食品保障有限公司',
          lanhutext1: '主营：副食品配送',
        },
        {
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng64c3d011d33f78503b241993a5bc2fcbd543812fcac69702ad10eef96edfd59f',
          lanhutext0: '青岛军民融合食品保障有限公司',
          lanhutext1: '主营：副食品配送',
        },
      ]
    };
  }
}
</script>

<style scoped>

.btn-jump {
  width: 200px;
  margin-top: 50px;
  text-align: right
}

.plat_cover_text_size {
  font-size: 18px;
  color: #888;
}

.banner_custom button {
  touch-action: manipulation
}

.banner_custom .el-carousel__indicators--horizontal {
  bottom: 130px
}

.banner_custom .el-carousel__container .el-carousel__item img {
  display: inline-block;
  width: 100%;
  cursor: pointer
}

.banner_custom .banner_video_play {
  z-index: 100;
  position: absolute;
  right: 140px;
  margin-top: -246px;
  cursor: pointer
}

.banner_custom .banner_video_shadow {
  width: 100%;
  height: 100vh;
  background: rgba(32, 32, 32, .5);
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000
}

.banner_custom .banner_video {
  width: 80%;
  outline: none
}

.banner_custom .banner_video_close {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 42px;
  color: #fff;
  cursor: pointer
}

.banner_custom .banner_pc_container {
  width: 100%;
  top: 80px;
  padding-top: 140px;
  position: absolute;
  cursor: pointer
}

.banner_custom .pc_logo {
  height: 24px;
  width: auto !important;
  transform: translateY(40px);
  opacity: 0
}

.banner_custom .pc_title {
  min-height: 48px;
  font-size: 46px;
  line-height: 48px;
  font-weight: 600;
  margin-top: 32px;
  color: #222;
  transform: translateY(40px);
  opacity: 0
}

.banner_custom .pc_text {
  min-height: 22px;
  font-size: 18px;
  line-height: 22px;
  color: #222;
  margin-top: 24px;
  transform: translateY(40px);
  opacity: 0
}

.banner_custom .pc_btn_div {
  transform: translateY(40px);
  opacity: 0;
  display: inline-flex
}

.banner_custom .pc_btn {
  min-width: 204px;
  height: 66px;
  padding: 0 32px;
  margin-right: 20px;
  margin-top: 48px;
  font-size: 18px;
  color: #222;
  background: transparent;
  border: 1px solid #222;
  border-radius: 0
}

.banner_custom .pc_btn:hover {
  color: #1989fa;
  border: 1px solid #1989fa
}

.banner_custom .pc_btn span {
  display: inline-flex
}

.banner_custom .pc_btn img {
  display: inline-block;
  width: 20px !important;
  margin-left: 12px !important
}

.banner_custom .pc_btn .play {
  width: 22px !important
}

.banner_custom .pc_banner_img_focus {
  transition: all 2s;
  transform: scale(1.1)
}

.banner_custom .pc_banner_content_focus {
  transition: all 1s;
  opacity: 1;
  transform: translateY(0) !important
}

.banner_custom .banner_mobile_container {
  width: 100%;
  top: 0;
  padding-top: 40px;
  text-align: center;
  position: absolute
}

.banner_custom .mobile_logo {
  height: 18px;
  width: auto !important;
  display: inline-block !important
}

.banner_custom .mobile_title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #222;
  padding: 0 20%;
  margin-top: 24px
}

.banner_custom .mobile_text {
  font-size: 14px;
  line-height: 28px;
  color: #666;
  padding: 0 5%;
  margin-top: 16px
}

.banner_custom .mobile_btn {
  min-width: 116px;
  height: 36px;
  font-size: 12px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid #222;
  color: #222;
  border-radius: 0;
  margin-top: 24px
}

@media (min-width: 1439px) and (max-width: 1599px) {
  .banner_custom .banner_pc_container {
    padding-top: 80px
  }
}

@media (min-width: 1300px) and (max-width: 1440px) {
  .banner_custom .banner_pc_container {
    padding-top: 60px
  }

  .banner_custom .pc_title {
    font-size: 40px;
    margin-top: 24px
  }

  .banner_custom .pc_btn {
    height: 50px
  }
}

@media (min-width: 1200px) and (max-width: 1299px) {
  .banner_custom .banner_pc_container {
    padding-top: 36px
  }

  .banner_custom .pc_title {
    font-size: 38px;
    margin-top: 24px
  }

  .banner_custom .pc_btn {
    height: 50px
  }
}

@media (max-width: 1199px) {
  .banner_custom .banner_pc_container {
    padding-top: 0;
    top: 40px
  }

  .banner_custom .pc_title {
    font-size: 36px;
    margin-top: 24px
  }

  .banner_custom .pc_btn {
    height: 50px
  }
}

.index_fi_plat .plat_li {
  width: 20%;
  height: 540px;
  position: relative;
  flex-grow: 1;
  padding-left: 12px;
  padding-right: 12px;
  transition: .65s
}

.index_fi_plat .plat_li:hover {
  width: 26%
}

.index_fi_plat .plat_li_div {
  width: 100%;
  position: relative
}

.index_fi_plat .plat_cover {
  width: 100%;
  height: 540px;
  position: absolute;
  top: 0;
  padding: 80px 40px 0;
  z-index: 1;
  background: transparent;
  box-shadow: 0 0 40px 0 rgba(0, 70, 147, .2);
  overflow: hidden
}

.index_fi_plat .plat_cover .plat_cover_text1 {
  width: 160px;
  font-size: 24px;
  color: #222
}

.index_fi_plat .plat_cover .plat_cover_text3 {
  width: 160px;
  font-size: 12px;
  color: #222;
  margin-top: 10px
}

.index_fi_plat .plat_cover .plat_cover_text3 span {
  font-size: 28px;
  color: #222;
  font-weight: 600;
  line-height: 32px;
  margin-right: 2px
}

.index_fi_plat .plat_cover .plat_cover_text4 {
  width: 160px;
  font-size: 12px;
  color: #222
}

.index_fi_plat .plat_cover .plat_cover_text2 {
  display: none;
  width: 340px;
  font-size: 16px;
  line-height: 30px;
  color: #222;
  margin-top: 32px
}

.index_fi_plat .plat_cover:hover {
  background: hsla(0, 0%, 100%, .6)
}

.index_fi_plat .plat_cover:hover .plat_cover_text2 {
  display: block
}

.index_fi_plat .plat_top_w {
  width: 100%;
  height: 280px;
  background: #fff
}

.index_fi_plat .plat_bg_img {
  display: block;
  position: relative;
  height: 260px;
  padding: 32px;
  background-size: cover;
  background-position: 0;
  overflow: hidden;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none
}

.index_fi_plat .img1 {
  background-image: url(../../../assets/images/index/img1.png)
}

.index_fi_plat .img2 {
  background-image: url(../../../assets/images/index/img2.png)
}

.index_fi_plat .img3 {
  background-image: url(../../../assets/images/index/img3.png)
}

.index_fi_plat .img4 {
  background-image: url(../../../assets/images/index/img4.png)
}

.index_fi_plat .img5 {
  background-image: url(../../../assets/images/index/img5.png)
}

@media (max-width: 1200px) {
  .index_fi_plat .plat_li_div {
    margin-bottom: 12px
  }

  .index_fi_plat .plat_cover_m {
    width: 100%;
    height: 220px;
    position: absolute;
    top: 0;
    padding: 18px 20px;
    z-index: 1;
    background: hsla(0, 0%, 100%, .3);
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, .07);
    overflow: hidden
  }

  .index_fi_plat .plat_top_w_m {
    width: 100%;
    height: 140px;
    background: #fff
  }

  .index_fi_plat .plat_bg_img_m {
    display: block;
    position: relative;
    height: 80px;
    background-size: cover;
    background-position: 0;
    overflow: hidden;
    color: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none
  }

  .index_fi_plat .plat_cover_text1_m {
    width: 31px;
    font-size: 16px;
    color: #222;
    font-weight: 600
  }

  .index_fi_plat .plat_cover_text2_m {
    width: 31px;
    font-size: 14px;
    color: #222;
    line-height: 20px;
    margin-top: 4px
  }

  .index_fi_plat .plat_cover_text3_m {
    width: 31px;
    font-size: 12px;
    color: #222;
    line-height: 18px;
    margin-top: 4px
  }
}
</style>

<style scoped src="../../home/index.css"></style>
<style scoped src="../../home/common.css"></style>
